<template>
    <div class="time">
        <div class="options">
            <div v-for="(item, idx) in timeOptions" :key="idx" class="time_option" :class="{selected: curTimeIdx == idx}" @click="timeChange(idx)">{{ item.lable }}</div>
        </div>
        <div class="select">
            <el-date-picker v-if="curTimeIdx == 0" v-model="curDay" type="date" format="DD/MM/YYYY" value-format="DD/MM/YYYY" />
            <el-date-picker v-else-if="curTimeIdx == 1" v-model="curDay" type="month" placeholder="Pick a month" format="MM/YYYY" value-format="MM/YYYY" />
            <el-date-picker v-else-if="curTimeIdx == 2" v-model="curDay" type="year" placeholder="Pick a year" format="YYYY" value-format="YYYY" />
            <el-date-picker v-else-if="curTimeIdx == 3" v-model="range" type="daterange" @change="change" range-separator="To" start-placeholder="Start date" end-placeholder="End date" format="DD/MM/YYYY" value-format="DD/MM/YYYY" />
            <div v-else></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted, watch} from 'vue'
const $emit = defineEmits(['timeChange'])
const timeOptions = ref([
    { lable: '日', type: 0, dataType: 0 },
    { lable: '月', type: 1, dataType: 1 },
    { lable: '年', type: 2, dataType: 2 },
    { lable: '自定义', type: 3, dataType: 1 },
])
let curTimeIdx = ref(0)
let range = ref([])
let curDay = ref('')
watch(curDay, val => {
    let arr = val.split('/')
    let date
    if (arr.length == 1) {
        date = new Date(arr[0])
    } else if (arr.length == 2) {
        date = new Date(arr[1], arr[0] - 0 - 1)
    } else if (arr.length == 3) {
        date = new Date(arr[2], arr[1] - 0 - 1, arr[0])
    }
    onChange(date)
})
onMounted(() => {
    timeChange(0)
})
const timeChange = (idx, useNow = false) => {
    curTimeIdx.value = idx

    let now = new Date()
    let timeStr = ''

    let month = now.getMonth() + 1
    if (month < 10) month = '0' + month

    let day = now.getDate()
    if (day < 10) day = '0' + day

    let year = now.getFullYear()

    if (idx == 0) {
        timeStr = `${day}/${month}/${year}`
    }
    else if (idx == 1) {
        timeStr = `${month}/${year}`
    }
    else if (idx == 2) {
        timeStr = `${year}`
    }

    
    if (idx == 3) {
        onChange(null, [`${day}/${month}/${year}`, `${day}/${month}/${year}`])
        return
    }

    curDay.value = timeStr
}
const output = (startTime, endTime) => {
    $emit('timeChange', {startTime, endTime, ...timeOptions.value[curTimeIdx.value]})
}

const onChange = (date, e) => {
    let startDate
    let endDate
    if (curTimeIdx.value == 0) {
        startDate = date.toLocaleDateString().split('/').join('-')
        endDate = date.toLocaleDateString().split('/').join('-')
    }
    // else if (this.curTimeIdx == 1) {
    //     let day = date.getDay()
    //     if (day == 0) {
    //         day = 7
    //     }
    //     let begTime = date.getTime() - (day - 1) * 24 * 60 * 60 * 1000
    //     let endTime = begTime + 6 * 24 * 60 * 60 * 1000
    //     startDate = new Date(begTime).toLocaleDateString().split('/').join('-')
    //     endDate = new Date(endTime).toLocaleDateString().split('/').join('-')
    // }
    else if (curTimeIdx.value == 1) {
        let year = date.getFullYear()
        let month = date.getMonth()
        let firstDay = new Date(year, month, 1)
        let lastDay = new Date(year, month + 1, 0)
        startDate = firstDay.toLocaleDateString().split('/').join('-')
        endDate = lastDay.toLocaleDateString().split('/').join('-')
    } else if (curTimeIdx.value == 2) {
        let year = date.getFullYear()
        startDate = year + '-01-01'
        endDate = year + '-12-31'
    }
    else if (curTimeIdx.value == 3) {
        startDate = e[0].split('/').reverse().join('-')
        endDate = e[1].split('/').reverse().join('-')
        range.value = e
    }
    output(startDate, endDate)
}

const change = (e) => {
    onChange(null, e)
}
</script>

<style lang="scss" scoped>
.time {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .options {
        display: flex;
        align-items: center;
        .time_option {
            padding: 0 20px;
            cursor: pointer;
            line-height: 2;
            border-bottom: 2px solid transparent;
            border: 2px solid #000;
            margin-left: -2px;
            transition: all .5s;
            word-break: keep-all;
            flex-shrink: 0;

            &:first-child {
                margin-left: 0;
                border-radius: 10px 0 0 10px;
            }
            &:last-child {
                border-radius: 0 10px 10px 0;
            }

            &.selected {
                // font-weight: 600;
                z-index: 10;
                border-color: $theme-primary;
                color: $theme-primary;
            }
        }
    }
    
}
</style>